<template>
  <view class="player-detail-container">
    <!-- 顶部导航栏 -->
    <view class="header-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">‹</text>
      </view>
      <view class="nav-title"></view>
      <view class="nav-right" @click="showMenu">
        <text class="nav-icon">⋯</text>
      </view>
    </view>

    <!-- 球员基本信息区域 -->
    <view class="player-info-section" :style="{ paddingTop: (statusBarHeight + 88) + 'px' }">
      <!-- 顶部球员主要信息 -->
      <view class="player-main-content">
        <view class="player-content-wrapper">
          <!-- 球员头像和右侧信息 -->
          <view class="player-top-section">
            <!-- 球员头像 -->
            <view class="player-avatar-wrapper">
              <image class="player-avatar" :src="playerInfo.avatar" mode="aspectFill"></image>
            </view>
            
            <!-- 右侧球员基本信息 -->
            <view class="player-right-info">
              <view class="player-name-section">
                <text class="player-name-cn">{{ playerInfo.name }}</text>
                <text class="player-name-en">{{ playerInfo.nameEn }}</text>
              </view>
              
              <!-- 球队信息 -->
              <view class="team-info-row">
                <image class="team-logo" :src="playerInfo.teamLogo" mode="aspectFit"></image>
                <text class="team-name">{{ playerInfo.teamName }}</text>
              </view>
              
              <!-- 位置和号码 -->
              <view class="position-info">
                <text class="jersey-number">{{ playerInfo.jerseyNumber }}号</text>
                <text class="divider">/</text>
                <text class="position">{{ playerInfo.position }}</text>
                <text class="divider">/</text>
                <text class="hand-preference">{{ playerInfo.handPreference }}</text>
              </view>
            </view>
          </view>
          
          <!-- 身体信息（放在头像下方）-->
          <view class="physical-info-bottom">
            <text class="age-info">{{ playerInfo.age }}岁</text>
            <text class="divider">/</text>
            <text class="nationality">{{ playerInfo.nationality }}</text>
            <text class="divider">/</text>
            <text class="height">{{ playerInfo.heightOnly }}</text>
            <text class="divider">/</text>
            <text class="weight">{{ playerInfo.weightOnly }}</text>
            <text class="divider">/</text>
            <text class="profession">{{ playerInfo.profession }}</text>
          </view>
        </view>
      </view>
      
      <!-- 详细资料按钮 -->
      <view class="detail-button-section">
        <view class="detail-button" @click="scrollToProfile">
          <text class="button-text">详细资料</text>
          <text class="button-arrow">↓</text>
        </view>
      </view>
    </view>

    <!-- 导航标签栏 -->
    <view class="tab-nav">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === index }" 
        v-for="(tab, index) in tabList" 
        :key="index"
        @click="switchTab(index)"
      >
        <text class="tab-text">{{ tab.name }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-section">
      <!-- 数据标签页 -->
      <view v-if="activeTab === 0" class="data-content">
        <!-- NBA标签 -->
        <view class="nba-tag">
          <text class="nba-text">NBA</text>
        </view>
        
        <!-- 赛季选择 -->
        <view class="season-selector">
          <text class="season-text">NBA2024-2025赛季 季后赛</text>
          <text class="dropdown-icon">▼</text>
        </view>

        <view class="stats-hint">
          <text class="hint-text">*以下数据来自联盟官网</text>
        </view>

        <!-- 数据雷达图 -->
        <view class="radar-chart-section">
          <view class="stat-item top">
            <text class="stat-value">29.9</text>
            <text class="stat-label">场均得分</text>
          </view>

          <view class="radar-chart">
            <!-- 使用CSS绘制的简化雷达图 -->
            <view class="radar-bg">
              <view class="radar-line radar-line-1"></view>
              <view class="radar-line radar-line-2"></view>
              <view class="radar-line radar-line-3"></view>
              <view class="radar-circle radar-circle-1"></view>
              <view class="radar-circle radar-circle-2"></view>
              <view class="radar-circle radar-circle-3"></view>
              <view class="radar-data-area"></view>
            </view>
          </view>

          <view class="stat-item left">
            <text class="stat-value">5.3</text>
            <text class="stat-label">场均篮板</text>
          </view>

          <view class="stat-item right">
            <text class="stat-value">0.9</text>
            <text class="stat-label">场均盖帽</text>
          </view>

          <view class="stat-item bottom-left">
            <text class="stat-value">6.5</text>
            <text class="stat-label">场均助攻</text>
          </view>

          <view class="stat-item bottom-right">
            <text class="stat-value">1.7</text>
            <text class="stat-label">场均抢断</text>
          </view>
        </view>

        <!-- 详细数据模块 -->
        <view class="detailed-stats-section">
          <view class="stats-header">
            <text class="stats-title">数据</text>
            <text class="player-stats-title">球员数据</text>
          </view>
          
          <view class="stats-list">
            <view class="stats-item" v-for="(stat, index) in detailedStats" :key="index">
              <text class="stat-name">{{ stat.name }}</text>
              <text class="stat-number">{{ stat.value }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 赛程标签页 -->
      <view v-else-if="activeTab === 1" class="schedule-content">
        <view class="schedule-header">
          <text class="schedule-title">近期赛程</text>
        </view>
        
        <view class="schedule-list">
          <view class="schedule-item" v-for="(match, index) in playerSchedule" :key="index">
            <view class="match-date">
              <text class="date-text">{{ match.date }}</text>
              <text class="time-text">{{ match.time }}</text>
            </view>
            <view class="match-info">
              <view class="teams">
                <text class="home-team">{{ match.homeTeam }}</text>
                <text class="vs-text">VS</text>
                <text class="away-team">{{ match.awayTeam }}</text>
              </view>
              <text class="match-status" :class="match.statusClass">{{ match.status }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 资料标签页 -->
      <view v-else-if="activeTab === 2" class="profile-content">
        <view class="profile-section">
          <text class="section-title">个人信息</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-label">全名</text>
              <text class="info-value">{{ playerInfo.fullName }}</text>
            </view>
            <view class="info-item">
              <text class="info-label info-label-red">性别</text>
              <text class="info-value">{{ playerInfo.gender }}</text>
            </view>
            <view class="info-item">
              <text class="info-label info-label-red">职业</text>
              <text class="info-value">{{ playerInfo.profession }}</text>
            </view>
            <view class="info-item">
              <text class="info-label info-label-red">民族</text>
              <text class="info-value">{{ playerInfo.ethnicity }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">位置</text>
              <text class="info-value">{{ playerInfo.position }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">年龄</text>
              <text class="info-value">{{ playerInfo.age }}岁</text>
            </view>
            <view class="info-item">
              <text class="info-label">身高体重</text>
              <text class="info-value">{{ playerInfo.height }} / {{ playerInfo.weight }}</text>
            </view>
          </view>
        </view>

        <view class="profile-section">
          <text class="section-title">职业生涯</text>
          <view class="career-timeline">
            <view class="timeline-item" v-for="(career, index) in playerCareer" :key="index">
              <view class="timeline-dot" :class="'timeline-dot-' + career.year"></view>
              <view class="timeline-content">
                <text class="timeline-year">{{ career.year }}</text>
                <text class="timeline-event">{{ career.event }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 其他内容占位 -->
      <view v-else class="other-content">
        <view class="empty-content">
          <text class="empty-text">{{ tabList[activeTab].name }}内容开发中...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      activeTab: 0,
      tabList: [
        { name: '数据' },
        { name: '赛程' },
        { name: '资料' }
      ],
      isFollowing: false, // 关注状态
      playerInfo: {
        name: '马克斯-斯特鲁斯',
        nameEn: 'Max Strus',
        fullName: '马克斯-斯特鲁斯',
        gender: '男',
        profession: '职业厨师',
        ethnicity: '白人',
        position: '得分后卫/前锋',
        age: '29',
        height: '196.0cm / 98.0kg',
        weight: '98.0kg',
        jerseyNumber: '1',
        nationality: '美国',
        heightOnly: '196.0cm',
        weightOnly: '98.0kg',
        handPreference: '惯用右手',
        teamName: '骑士',
        teamLogo: '/static/images/team_selected.png',
        avatar: '/static/images/mine.png'
      },
      // 球员赛程数据
      playerSchedule: [
        {
          date: '03月15日',
          time: '08:00',
          homeTeam: '雷霆',
          awayTeam: '湖人',
          status: '已结束',
          statusClass: 'finished'
        },
        {
          date: '03月18日',
          time: '09:30',
          homeTeam: '勇士',
          awayTeam: '雷霆',
          status: '已结束',
          statusClass: 'finished'
        },
        {
          date: '03月22日',
          time: '10:00',
          homeTeam: '雷霆',
          awayTeam: '快船',
          status: '进行中',
          statusClass: 'live'
        },
        {
          date: '03月25日',
          time: '08:30',
          homeTeam: '掘金',
          awayTeam: '雷霆',
          status: '未开始',
          statusClass: 'upcoming'
        }
      ],
      // 球员职业生涯数据
      playerCareer: [
        {
          year: '2018',
          event: '被洛杉矶快船队首轮第11顺位选中'
        },
        {
          year: '2019',
          event: '通过交易加盟俄克拉荷马城雷霆队'
        },
        {
          year: '2020',
          event: '首次入选NBA全明星阵容'
        },
        {
          year: '2022',
          event: '荣获NBA最快进步球员奖'
        },
        {
          year: '2023',
          event: '入选NBA最佳阵容一队'
        }
      ],
      // 详细统计数据
      detailedStats: [
        { name: '出场时间', value: '17.5' },
        { name: '得分', value: '11' },
        { name: '篮板', value: '3.3' },
        { name: '前场篮板', value: '1.2' },
        { name: '后场篮板', value: '2.1' },
        { name: '助攻', value: '0.9' },
        { name: '失误', value: '1.2' },
        { name: '抢断', value: '0.4' },
        { name: '盖帽', value: '0.3' },
        { name: '犯规', value: '1.9' }
      ]
    }
  },
  onLoad(options) {
    // 获取系统信息
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight || 20
      }
    })
    
    // 如果有传入球员ID，则获取球员详情
    if (options.playerId) {
      this.getPlayerDetail(options.playerId, options.playerName)
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 显示菜单
    showMenu() {
      uni.showActionSheet({
        itemList: ['分享球员', '收藏球员', '举报'],
        success: (res) => {
          console.log('选中了第' + (res.tapIndex + 1) + '个按钮')
        }
      })
    },

    // 切换标签
    switchTab(index) {
      this.activeTab = index
    },

    // 切换关注状态
    toggleFollow() {
      this.isFollowing = !this.isFollowing
      uni.showToast({
        title: this.isFollowing ? '已关注该球员' : '已取消关注',
        icon: 'success'
      })
    },

    // 滚动到详细资料部分
    scrollToProfile() {
      this.activeTab = 2 // 切换到资料标签页
      // 滚动到标签栏位置
      uni.pageScrollTo({
        selector: '.tab-nav',
        duration: 300
      })
    },

    // 获取球员详情
    getPlayerDetail(playerId, playerName) {
      // 模拟API调用
      console.log('获取球员详情:', playerId, playerName)
      
      // 根据传入的球员ID更新球员信息
      if (playerId && playerName) {
        // 这里可以根据ID从API获取完整的球员数据
        // 暂时使用传入的球员名称
        this.playerInfo.name = decodeURIComponent(playerName)
        
        // 模拟根据不同球员ID设置不同的数据
        switch(playerId) {
          case '2':
            this.playerInfo.nameEn = 'LeBron James'
            this.playerInfo.position = '小前锋'
            this.playerInfo.age = '39'
            this.playerInfo.jerseyNumber = '23'
            this.playerInfo.nationality = '美国'
            this.playerInfo.heightOnly = '206.0cm'
            this.playerInfo.weightOnly = '113.0kg'
            this.playerInfo.teamName = '湖人'
            break
          case '3':
            this.playerInfo.nameEn = 'Stephen Curry'
            this.playerInfo.position = '控球后卫'
            this.playerInfo.age = '35'
            this.playerInfo.jerseyNumber = '30'
            this.playerInfo.nationality = '美国'
            this.playerInfo.heightOnly = '191.0cm'
            this.playerInfo.weightOnly = '84.0kg'
            this.playerInfo.teamName = '勇士'
            break
          default:
            // 保持默认的马克斯-斯特鲁斯数据
            break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.player-detail-container {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 顶部导航栏 */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #B91C3C 0%, #BE185D 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 8px;
  z-index: 1000;
  
  .nav-left, .nav-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .nav-icon {
      color: #fff;
      font-size: 24px;
      font-weight: bold;
    }
  }
  
  .nav-title {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 44px;
  }
}

/* 球员信息区域 */
.player-info-section {
  background: linear-gradient(135deg, #B91C3C 0%, #BE185D 100%);
  padding: 20px;
  position: relative;
  min-height: 450px;
}

/* 球员主要内容区域 */
.player-main-content {
  margin-bottom: 40px;
  
  .player-content-wrapper {
    width: 100%;
    
    .player-top-section {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      
      .player-avatar-wrapper {
        margin-right: 20px;
        flex-shrink: 0;
        
        .player-avatar {
          width: 100px;
          height: 120px;
          border-radius: 8px;
          background: rgba(255, 255, 255, 0.1);
          border: 2px solid rgba(255, 255, 255, 0.2);
        }
      }
      
      .player-right-info {
        flex: 1;
        
        .player-name-section {
          margin-bottom: 16px;
          
          .player-name-cn {
            display: block;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            line-height: 1.2;
            margin-bottom: 4px;
          }
          
          .player-name-en {
            display: block;
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            font-weight: 400;
          }
        }
        
        .team-info-row {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          
          .team-logo {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            border-radius: 4px;
          }
          
          .team-name {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            font-weight: 500;
          }
        }
        
        .position-info {
          .jersey-number, .position, .hand-preference {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
          }
          
          .divider {
            color: rgba(255, 255, 255, 0.6);
            margin: 0 8px;
            font-size: 14px;
          }
        }
      }
    }
    
    /* 身体信息放在头像下方 */
    .physical-info-bottom {
      margin-left: 0;
      padding-left: 0;
      
      .age-info, .nationality, .height, .weight, .profession {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
      }
      
      .divider {
        color: rgba(255, 255, 255, 0.5);
        margin: 0 6px;
        font-size: 14px;
      }
    }
  }
}

/* 详细资料按钮区域 */
.detail-button-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  
  .detail-button {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.95);
      background: rgba(255, 255, 255, 0.25);
    }
    
    .button-text {
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-weight: 500;
      margin-right: 6px;
    }
    
    .button-arrow {
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      transform: translateY(1px);
    }
  }
}

/* 导航标签栏 */
.tab-nav {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    position: relative;
    
    .tab-text {
      font-size: 16px;
      color: #666;
      transition: color 0.3s;
    }
    
    &.active {
      .tab-text {
        color: #BE185D;
        font-weight: 500;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background: #BE185D;
        border-radius: 2px;
      }
    }
  }
}

/* 内容区域 */
.content-section {
  flex: 1;
  background: #fff;
  min-height: calc(100vh - 300px);
}

/* 数据内容 */
.data-content {
  padding: 20px;
}

.nba-tag {
  display: inline-block;
  background: #BE185D;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 15px;
  
  .nba-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }
}

.season-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  
  .season-text {
    font-size: 16px;
    color: #333;
    margin-right: 5px;
  }
  
  .dropdown-icon {
    color: #666;
    font-size: 12px;
    margin-left: 5px;
  }
}

.stats-hint {
  text-align: center;
  margin-bottom: 30px;
  
  .hint-text {
    color: #999;
    font-size: 12px;
  }
}

/* 雷达图区域 */
.radar-chart-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  
  .radar-chart {
    position: relative;
    width: 200px;
    height: 200px;
    
    .radar-bg {
      position: relative;
      width: 100%;
      height: 100%;
      
      .radar-line {
        position: absolute;
        background: #E8E8E8;
        
        &.radar-line-1 {
          top: 50%;
          left: 0;
          width: 100%;
          height: 1px;
          transform: translateY(-50%);
        }
        
        &.radar-line-2 {
          top: 0;
          left: 50%;
          width: 1px;
          height: 100%;
          transform: translateX(-50%);
        }
        
        &.radar-line-3 {
          top: 25%;
          left: 25%;
          width: 50%;
          height: 1px;
          transform: rotate(60deg);
          transform-origin: left center;
        }
      }
      
      .radar-circle {
        position: absolute;
        border: 1px solid #E8E8E8;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        &.radar-circle-1 {
          width: 60px;
          height: 60px;
        }
        
        &.radar-circle-2 {
          width: 120px;
          height: 120px;
        }
        
        &.radar-circle-3 {
          width: 180px;
          height: 180px;
        }
      }
      
      .radar-data-area {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140px;
        height: 140px;
        background: rgba(74, 144, 226, 0.1);
        border: 2px solid #4A90E2;
        border-radius: 50%;
        
        &::before {
          content: '';
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translateX(-50%);
          width: 8px;
          height: 8px;
          background: #4A90E2;
          border-radius: 50%;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 50%;
          transform: translateX(-50%);
          width: 8px;
          height: 8px;
          background: #4A90E2;
          border-radius: 50%;
        }
      }
    }
  }
  
  .stat-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .stat-value {
      font-size: 18px;
      font-weight: bold;
      color: #4A90E2;
      margin-bottom: 2px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
      white-space: nowrap;
    }
    
    &.top {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    
    &.left {
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    
    &.right {
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    
    &.bottom-left {
      bottom: 0;
      left: 20%;
    }
    
    &.bottom-right {
      bottom: 0;
      right: 20%;
    }
  }
}

/* 详细数据模块 */
.detailed-stats-section {
  margin-top: 30px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  
  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    
    .stats-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
    
    .player-stats-title {
      font-size: 16px;
      color: #666;
      font-weight: 500;
    }
  }
  
  .stats-list {
    .stats-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #f8f8f8;
      
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      
      .stat-name {
        font-size: 16px;
        color: #333;
        font-weight: 400;
      }
      
      .stat-number {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        min-width: 60px;
        text-align: right;
      }
    }
  }
}

/* 赛程内容 */
.schedule-content {
  padding: 20px;
  
  .schedule-header {
    margin-bottom: 20px;
    
    .schedule-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .schedule-list {
    .schedule-item {
      background: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      
      .match-date {
        width: 80px;
        text-align: center;
        margin-right: 15px;
        
        .date-text {
          display: block;
          font-size: 14px;
          color: #333;
          font-weight: 500;
          margin-bottom: 2px;
        }
        
        .time-text {
          display: block;
          font-size: 12px;
          color: #666;
        }
      }
      
      .match-info {
        flex: 1;
        
        .teams {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          
          .home-team, .away-team {
            font-size: 16px;
            color: #333;
            font-weight: 500;
          }
          
          .vs-text {
            margin: 0 10px;
            font-size: 14px;
            color: #666;
          }
        }
        
        .match-status {
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 10px;
          
          &.finished {
            background: #f0f0f0;
            color: #666;
          }
          
          &.live {
            background: #BE185D;
            color: #fff;
          }
          
          &.upcoming {
            background: #4A90E2;
            color: #fff;
          }
        }
      }
    }
  }
}

/* 资料内容 */
.profile-content {
  padding: 20px;
  
  .profile-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .section-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      display: block;
    }
    
    .info-list {
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .info-label {
          font-size: 14px;
          color: #666;
          
          &.info-label-red {
            color: #BE185D;
          }
        }
        
        .info-value {
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
      }
    }
    
    .career-timeline {
      .timeline-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .timeline-dot {
          width: 10px;
          height: 10px;
          background: #BE185D;
          border-radius: 50%;
          margin-right: 15px;
          margin-top: 6px;
          flex-shrink: 0;
          
          &.timeline-dot-2018 {
            background: #BE185D;
          }
          
          &.timeline-dot-2019 {
            background: #BE185D;
          }
          
          &.timeline-dot-2020 {
            background: #BE185D;
          }
          
          &.timeline-dot-2022 {
            background: #BE185D;
          }
          
          &.timeline-dot-2023 {
            background: #BE185D;
          }
          
          &.timeline-dot-2024 {
            background: #BE185D;
          }
        }
        
        .timeline-content {
          flex: 1;
          
          .timeline-year {
            display: block;
            font-size: 14px;
            color: #BE185D;
            font-weight: bold;
            margin-bottom: 2px;
          }
          
          .timeline-event {
            display: block;
            font-size: 14px;
            color: #333;
            line-height: 1.4;
          }
        }
      }
    }
  }
}

/* 其他内容 */
.other-content {
  padding: 40px 20px;
  text-align: center;
  
  .empty-content {
    .empty-text {
      color: #999;
      font-size: 16px;
    }
  }
}

/* 页面滚动适配 */
.player-detail-container {
  padding-top: 0;
}
</style>


